<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="/svn/common.js"></script>
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<script type="text/javascript" src="demo_order.js"></script>

<link rel="shortcut icon" href="/svn/favicon.ico"/>
<link rel="icon" href="/svn/favicon.ico" type="image/x-icon" />
<!-- above is common for all pages -->
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />	
<!-- above is common for jquery ui pages -->
<script type="text/javascript" src="demo_order.js"></script>

<title>線上美食下單系統(Demo)</title>
<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}

h2 {
	color:#79B933;
	border-bottom:2px solid #f6f6f6;
	margin:5px;
	text-align:center;
}
#main {
	margin:0 auto;
	width:690px;
	height:400px;
	text-align:center;
}
#myOrder {
	float:left;
	width:335px;
	min-height:400px;
	height:auto !important; /* fix for IE6 */
	height:560px;
	background-color:#dedede;
}
#theMenu {
	float:right;
	width:335px;
	min-height:400px;
	height:auto !important; /* fix for IE6 */
	height:560px;
	/*background-color:#dedede;*/
}
.block {
	width:300px;
	height:40px;
	background-color:#ff9;
	margin:5px auto;
	border:1px solid #999;
	line-height:40px;
	font-size:16px;
	text-align:center;
	cursor:move;
}
</style>
</head>
<body>
<div id="main">
  <div>
    <div id="myOrder">
    	<h2>我的訂單</h2>
    </div>
    <div id="theMenu">
			<ul>
				<li><a href="#tabs-1">第一</a></li>
				<li><a href="#tabs-2">第二</a></li>
				<li><a href="#tabs-3">第三</a></li>
			</ul>
      <div id="tabs-1">
        <div class="block" id="鹽酥雞" price='30' >鹽酥雞(30/份)
          <input value='1' size='3'/>
        </div>
        <div class="block" id="魷魚" price='30' >魷魚(30/份)
          <input value='1' size='3'/>
        </div>
        <div class="block" id="甜不辣" price='30' >甜不辣(30/份)
          <input value='1' size='3'/>
        </div>
        <div class="block" id="米血糕" price='30' >米血糕(10/片)
          <input value='1' size='3'/>
        </div>
      </div>
      <div id="tabs-2">
        <div class="block" id="豆乾" price='30' >豆乾(10/串-3片)
          <input value='1' size='3'/>
        </div>
        <div class="block" id="豆子" price='30' >豆子(10/包)
          <input value='1' size='3'/>
        </div>
        <div class="block" id="青椒" price='30' >青椒(10/個)
          <input value='1' size='3'/>
        </div>
      </div>
      <div id="tabs-3">
        <div class="block" id="豆乾" price='30' >豆乾(10/串-3片)
          <input value='1' size='3'/>
        </div>
        <div class="block" id="蘿菠" price='30' >蘿菠(10/片)
          <input value='1' size='3'/>
        </div>
      </div>
    </div>
  </div>
  <p>
  <input type="button" value="計算訂單" onclick="calc()" />
  <p>
  <div id='report'>尚未有訂單</div>
  <p>
  <input type="button" value="送出訂單" onclick="sendOrder()" />
</div>
</body>
</html>
